<template>
  <div class="emotional-child">
    <div class="product-item">
      <div class="product-box">
        <ul>
          <li v-for="(item, index) in productList" :key="index">
            <div class="product-box-wrap">
              <div class="product-box-title">
                <span>{{ item.title }}</span>
              </div>
              <div class="box-detail">
                <div class="box-detail-item">
                  <img :src="item.icon" alt="" />
                  <p>
                    情绪值：
                    <span>{{ item.emotional }}</span>
                  </p>
                </div>
                <div class="box-detail-item">
                  <p>
                    预警情绪:
                    <span>{{ item.alarm }}</span>
                  </p>
                </div>
                <div class="box-detail-item">
                  <p>
                    环比：
                    <i class="el-icon-caret-top" style="color: red; font-weight: normal"></i>
                    <span style="font-size: 12px; color: red; font-weight: normal">{{ item.analysis }}%</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="product-chart-item">
        <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane name="yx" label="产品营销">
            <div class="personal-label-view-title" slot="label">
              <p>产品营销</p>
              <span>清晰、规范、精准</span>
            </div>
            <div class="personal-label-view-wrap">
              <div id="personalLabelEchart" style="width: 2000px; height: 310px; padding-top: 24px"></div>
              <div class="chart-legend">
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu_1.png" alt="" />
                  <p>高满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyiduyiban.png" alt="" />
                  <p>中满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu.png" alt="" />
                  <p>低满意</p>
                </div>
              </div>
              <div class="chart-analysis">
                <div class="chart-analysis-item" v-for="(item, index) in chartList" :key="index">
                  <div class="chart-analysis-item-wrap">
                    <div class="chart-analysis-item-title">{{ item.title }}</div>
                    <el-badge :value="item.value" class="item">
                      <div class="chart-analysis-item-info">
                        <span>{{ item.info }}</span>
                      </div>
                    </el-badge>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="bl" label="产品办理">
            <div class="personal-label-view-title" slot="label">
              <p>产品办理</p>
              <span>订购、投诉</span>
            </div>
            <div class="personal-label-view-wrap">
              <div id="blEchart" style="width: 2000px; height: 310px; padding-top: 24px"></div>
              <div class="chart-legend">
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu_1.png" alt="" />
                  <p>高满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyiduyiban.png" alt="" />
                  <p>中满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu.png" alt="" />
                  <p>低满意</p>
                </div>
              </div>
              <div class="chart-analysis">
                <div class="chart-analysis-item" v-for="(item, index) in chartList" :key="index">
                  <div class="chart-analysis-item-wrap">
                    <div class="chart-analysis-item-title">{{ item.title }}</div>
                    <el-badge :value="item.value" class="item">
                      <div class="chart-analysis-item-info">
                        <span>{{ item.info }}</span>
                      </div>
                    </el-badge>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="sy" label="产品使用">
            <div class="personal-label-view-title" slot="label">
              <p>产品使用</p>
              <span>资费、网络、体验、服务</span>
            </div>
            <div class="personal-label-view-wrap">
              <div id="syLabelEchart" style="width: 2000px; height: 310px; padding-top: 24px"></div>
              <div class="chart-legend">
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu_1.png" alt="" />
                  <p>高满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyiduyiban.png" alt="" />
                  <p>中满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu.png" alt="" />
                  <p>低满意</p>
                </div>
              </div>
              <div class="chart-analysis">
                <div class="chart-analysis-item" v-for="(item, index) in chartList" :key="index">
                  <div class="chart-analysis-item-wrap">
                    <div class="chart-analysis-item-title">{{ item.title }}</div>
                    <el-badge :value="item.value" class="item">
                      <div class="chart-analysis-item-info">
                        <span>{{ item.info }}</span>
                      </div>
                    </el-badge>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="tj" label="产品推荐">
            <div class="personal-label-view-title" slot="label">
              <p>产品推荐</p>
              <span>家庭圈、生活圈、工作圈</span>
            </div>
            <div class="personal-label-view-wrap">
              <div id="tjLabelEchart" style="width: 2000px; height: 310px; padding-top: 24px"></div>
              <div class="chart-legend">
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu_1.png" alt="" />
                  <p>高满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyiduyiban.png" alt="" />
                  <p>中满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu.png" alt="" />
                  <p>低满意</p>
                </div>
              </div>
              <div class="chart-analysis">
                <div class="chart-analysis-item" v-for="(item, index) in chartList" :key="index">
                  <div class="chart-analysis-item-wrap">
                    <div class="chart-analysis-item-title">{{ item.title }}</div>
                    <el-badge :value="item.value" class="item">
                      <div class="chart-analysis-item-info">
                        <span>{{ item.info }}</span>
                      </div>
                    </el-badge>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="td" label="产品退订">
            <div class="personal-label-view-title" slot="label">
              <p>产品退订</p>
              <span>退订、携转、销户</span>
            </div>
            <div class="personal-label-view-wrap">
              <div id="tdLabelEchart" style="width: 2000px; height: 310px; padding-top: 24px"></div>
              <div class="chart-legend">
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu_1.png" alt="" />
                  <p>高满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyiduyiban.png" alt="" />
                  <p>中满意</p>
                </div>
                <div class="chart-legend-item">
                  <img src="../../assets/images/manyidu.png" alt="" />
                  <p>低满意</p>
                </div>
              </div>
              <div class="chart-analysis">
                <div class="chart-analysis-item" v-for="(item, index) in chartList" :key="index">
                  <div class="chart-analysis-item-wrap">
                    <div class="chart-analysis-item-title">{{ item.title }}</div>
                    <el-badge :value="item.value" class="item">
                      <div class="chart-analysis-item-info">
                        <span>{{ item.info }}</span>
                      </div>
                    </el-badge>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="alarm-label-item">
      <div class="alarm-label-item-box">
        <div class="alarm-label-item-box-bg">
          <div class="box-title">
            <span>体验情绪预警</span>
          </div>
          <div class="alarm-label-item-box-info">
            <div class="alarm-label-user-info-item">
              <div class="alarm-label-user-box">
                <div class="avatar">
                  <el-avatar size="large" :src="avatarUrl"></el-avatar>
                  <p>5星</p>
                </div>
                <div class="info">
                  <span>张三</span>
                  <span>139283412231</span>
                  <span style="text-align: right">昆明</span>
                  <span class="tag-style">
                    <el-tag size="small">集团</el-tag>
                    <el-tag size="small">5G</el-tag>
                    <el-tag size="small">家庭</el-tag>
                  </span>
                  <span style="flex: 0 1 40%">满意度：89分</span>
                  <span>
                    <img src="../../assets/images/manyidu.png" alt="" />
                    低风险客户
                  </span>
                </div>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="alarm-label-user-box">
                <div class="alarm-label-user-box-item">
                  <img src="../../assets/images/alarm.png" alt="" />
                  <p>
                    情绪预警：
                    <span>3</span>
                    个
                  </p>
                </div>
                <div class="alarm-label-user-box-item">
                  <img src="../../assets/images/tousu.png" alt="" />
                  <p>
                    投诉：
                    <span>2</span>
                    次
                  </p>
                </div>
              </div>
            </div>
            <div class="emotional-list-item">
              <div class="emotional-list-item-table">
                <el-radio-group v-model="radio" size="small" @change="changeList" style="margin-bottom: 14px">
                  <el-radio-button label="情绪预警"></el-radio-button>
                  <el-radio-button label="投诉清单"></el-radio-button>
                </el-radio-group>
                <div class="emotional-list-item-table-wrap" v-show="isAlarm">
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="cd" label="触点"></el-table-column>
                    <el-table-column prop="act" label="行为"></el-table-column>
                    <el-table-column prop="emotional" label="情绪值"></el-table-column>
                    <el-table-column prop="unhappy" label="不满关键因素"></el-table-column>
                    <el-table-column prop="response" label="责任部门"></el-table-column>
                    <el-table-column label="操作">
                      <template>
                        <el-button type="text">关怀</el-button>
                        <el-button type="text">详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="emotional-list-item-table-wrap" v-show="!isAlarm">
                  <el-table :data="tableListData" border style="width: 100%">
                    <el-table-column prop="type" label="投诉类型"></el-table-column>
                    <el-table-column prop="time" label="投诉时间"></el-table-column>
                    <el-table-column prop="problem" label="投诉问题"></el-table-column>
                    <el-table-column prop="relay" label="投诉回单"></el-table-column>
                    <el-table-column prop="emotional" label="情绪值"></el-table-column>
                    <el-table-column label="操作">
                      <template>
                        <el-button type="text">关怀</el-button>
                        <el-button type="text">详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="alarm-label-item-box">
        <div class="alarm-label-item-box-bg">
          <div class="alarm-label-item-box-info label-manage" style="padding-top: 0; padding-right: 0">
            <div class="label-manage-radio-wrap">
              <div class="label-manage-radio-wrap-item">
                <div class="box-title">
                  <span>客户标签管理</span>
                </div>
                <div class="label-manage-radio-group">
                  <el-radio-group size="small" v-model="typeData" @change="changeRadio">
                    <el-radio-button label="触点"></el-radio-button>
                    <el-radio-button label="产品"></el-radio-button>
                    <el-radio-button label="网络"></el-radio-button>
                  </el-radio-group>
                </div>
                <div class="box-title" style="text-align: center; margin-top: 24px">峰值标签Top占比</div>
                <div id="topLabel" style="width: 500px; height: 300px; margin: -24px auto"></div>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="label-manage-radio-wrap-item">
                <div class="box-title">
                  <span style="display: inline-block; margin-left: 14px">不满标签词云</span>
                </div>
                <div class="label-manage-radio-wrap-item-label" style="text-align: center; padding-top: 24px">
                  <span style="color: red; font-size: 18px; font-weight: 600">23&nbsp;&nbsp;</span>
                  个&nbsp;&nbsp;标签量
                </div>
                <div id="wordCloud" style="width: 370px; height: 300px; margin: 36px auto"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class PersonalPage extends Vue {
  productList = [
    {
      title: '产品营销',
      emotional: 92,
      alarm: 1,
      analysis: 15.06,
      icon: require('@/assets/images/manyidu.png')
    },
    {
      title: '产品营销',
      emotional: 92,
      alarm: 1,
      analysis: 15.06,
      icon: require('@/assets/images/manyidu_1.png')
    },
    {
      title: '产品营销',
      emotional: 92,
      alarm: 1,
      analysis: 15.06,
      icon: require('@/assets/images/manyidu.png')
    },
    {
      title: '产品营销',
      emotional: 92,
      alarm: 1,
      analysis: 15.06,
      icon: require('@/assets/images/manyiduyiban.png')
    },
    {
      title: '产品营销',
      emotional: 92,
      alarm: 1,
      analysis: 15.06,
      icon: require('@/assets/images/manyidu.png')
    }
  ];

  activeName = 'yx';
  private $echarts: any;

  avatarUrl = require('@/assets/images/touxiang.png');

  chartList = [
    {
      title: '触点',
      info: '营业厅',
      value: '线上'
    },
    {
      title: '行为',
      info: '资费投诉',
      value: ''
    },
    {
      title: '情绪值',
      info: '78分',
      value: '省份'
    },
    {
      title: '不满因素',
      info: '资费规则无法查询',
      value: '回执'
    },
    {
      title: '关怀效果',
      info: '促销赠送',
      value: '5月'
    }
  ];

  tableData = [
    {
      cd: '1',
      act: '1',
      emotional: '1',
      unhappy: '1',
      response: '1'
    },
    {
      cd: '1',
      act: '1',
      emotional: '1',
      unhappy: '1',
      response: '1'
    },
    {
      cd: '1',
      act: '1',
      emotional: '1',
      unhappy: '1',
      response: '1'
    },
    {
      cd: '1',
      act: '1',
      emotional: '1',
      unhappy: '1',
      response: '1'
    },
    {
      cd: '1',
      act: '1',
      emotional: '1',
      unhappy: '1',
      response: '1'
    }
  ];
  tableListData = [
    {
      type: '2',
      time: '2',
      problem: '2',
      relay: '2',
      emotional: '2'
    }
  ];
  radio = '情绪预警';
  typeData = '产品';
  isAlarm = true;

  mounted() {
    this.initEchart('yx');
    this.initTopChart();
    this.initWordChart();
  }

  initEchart(type: string): void {
    let lineEchart: any;
    if (type === 'yx') {
      lineEchart = this.$echarts.init(document.getElementById('personalLabelEchart'));
    } else if (type === 'bl') {
      lineEchart = this.$echarts.init(document.getElementById('blEchart'));
    } else if (type === 'sy') {
      lineEchart = this.$echarts.init(document.getElementById('syLabelEchart'));
    } else if (type === 'tj') {
      lineEchart = this.$echarts.init(document.getElementById('tjLabelEchart'));
    } else {
      lineEchart = this.$echarts.init(document.getElementById('tdLabelEchart'));
    }
    const option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'item',
        formatter: function() {
          return '<div class="tooltip">进厅咨询 10次 <span style="color: red;"><i class="el-icon-caret-top"></i>30%</span></div>';
        }
      },
      legend: {},
      toolbox: {
        show: false
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['', '', '', '', '', '']
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        left: '2%',
        right: '4%',
        bottom: '0',
        containLabel: true
      },
      series: [
        {
          data: [70, 90, 86, 92, 78, 90],
          type: 'line',
          smooth: true,
          areaStyle: {},
          lineStyle: {
            color: '#ff9900'
          },
          itemStyle: {
            normal: {
              label: {
                position: [0, -45],
                show: true,
                formatter: function() {
                  return '进厅咨询';
                }
              },
              areaStyle: { type: 'default' },
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff9900' },
                { offset: 0.3, color: 'rgba(249, 183, 84, 0.3)' },
                { offset: 1, color: 'rgba(255, 235, 204, 0.1)' }
              ]),
              borderColor: '#ff9900',
              borderWidth: 2
            }
          },
          markPoint: {
            data: [
              {
                name: '进厅咨询',
                yAxis: 92,
                x: '60.6%'
              },
              {
                yAxis: 79,
                x: '78.9%'
              },
              {
                yAxis: 90,
                x: '97%'
              },
              {
                yAxis: 86,
                x: '42.5%'
              },
              {
                yAxis: 90,
                x: '24.3%'
              },
              {
                yAxis: 70,
                x: '6%'
              }
            ],
            itemStyle: {},
            symbol:
              'image://',
            symbolSize: 30,
            symbolOffset: [0, '-50%']
          }
        }
      ]
    };
    lineEchart.setOption(option);
  }

  handleClick(tab: any): void {
    switch (tab.name) {
      case 'yx':
        this.initEchart('yx');
        break;
      case 'bl':
        this.initEchart('bl');
        break;
      case 'sy':
        this.initEchart('sy');
        break;
      case 'tj':
        this.initEchart('tj');
        break;
      case 'td':
        this.initEchart('td');
        break;
      default:
        break;
    }
  }

  changeList(): void {
    this.isAlarm = this.radio === '情绪预警';
  }

  changeRadio(): void {
    switch (this.typeData) {
      case '触点':
        break;
      case '产品':
        break;
      case '网络':
        break;
      default:
        break;
    }
  }

  initTopChart(): void {
    const topEchart = this.$echarts.init(document.getElementById('topLabel'));
    const pieData = [
      { value: 40, name: '分类1' },
      { value: 33, name: '分类2' },
      { value: 28, name: '分类3' },
      { value: 22, name: '分类4' }
    ];
    const option = {
      legend: {
        top: 'bottom',
        formatter: function(name: string) {
          let total = 0;
          let target = 0;
          for (var i = 0, l = pieData.length; i < l; i++) {
            total += pieData[i].value;
            if (pieData[i].name === name) {
              target = pieData[i].value;
            }
          }
          const arr = [
            '{b|' +
              name +
              '} {a|' +
              ((target / total) * 100).toFixed(2) +
              '%}  {c|   } {d|' +
              ((target / total) * 100).toFixed(2) +
              '%}'
          ];
          return arr;
        },
        textStyle: {
          rich: {
            a: {
              fontSize: 14,
              align: 'left'
            },
            b: {
              fontSize: 14,
              verticalAlign: 'top',
              align: 'left'
            },
            c: {
              align: 'center',
              color: 'red',
              backgroundColor: {
                image: require('@/assets/images/向上.png')
              }
            },
            d: {
              fontSize: 14,
              align: 'left',
              color: 'red'
            }
          }
        }
      },
      toolbox: {
        show: false
      },
      series: [
        {
          name: '峰值标签TOP占比',
          type: 'pie',
          radius: ['20%', '100%'],
          center: ['45%', '25%'],
          startAngle: 0,
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          data: [
            { value: 40, name: '分类1' },
            { value: 33, name: '分类2' },
            { value: 28, name: '分类3' },
            { value: 22, name: '分类4' },
            { value: 0, itemStyle: { normal: { color: 'rgba(0,0,0,0)' }}},
            { value: 0, itemStyle: { normal: { color: 'rgba(0,0,0,0)' }}},
            { value: 0, itemStyle: { normal: { color: 'rgba(0,0,0,0)' }}},
            { value: 0, itemStyle: { normal: { color: 'rgba(0,0,0,0)' }}}
          ]
        }
      ]
    };
    topEchart.setOption(option);
  }

  initWordChart(): void {
    const wordEchart = this.$echarts.init(document.getElementById('wordCloud'));
    const JosnList = [
      { name: '单机', value: '111' },
      { name: '剧情', value: '222' },
      { name: '付费', value: '458' },
      { name: '休闲', value: '445' },
      { name: '经营', value: '456' },
      { name: '益智', value: '647' },
      { name: '内购', value: '189' },
      { name: '网络', value: '112' },
      { name: '付费', value: '458' },
      { name: '休闲', value: '445' },
      { name: '经营', value: '456' },
      { name: '益智', value: '647' },
      { name: '内购', value: '189' },
      { name: '网络', value: '864' },
      { name: '情绪', value: '652' }
    ];
    const option = {
      tooltip: {
        show: true
      },
      series: [
        {
          name: '不满标签',
          type: 'wordCloud',
          sizeRange: [10, 50],
          rotationRange: [-45, 90],
          rotationStep: 45,
          textRotation: [0, 45, 90, -45],
          // 形状
          shape: 'circle',
          textStyle: {
            color: function() {
              // 文字颜色的随机色
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') +
                ')'
              );
            },
            // 悬停上去的字体的阴影设置
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: JosnList
        }
      ]
    };
    wordEchart.setOption(option);
  }
}
</script>
